<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
        border: 0;
      }
      .all {
        width: 500px;
        height: 200px;
        padding: 7px;
        border: 1px solid #ccc;
        margin: 100px auto;
        position: relative;
      }
      .screen {
        width: 500px;
        height: 200px;
        overflow: hidden;
        position: relative;
      }
      .screen li {
        width: 500px;
        height: 200px;
        overflow: hidden;
        float: left;
      }
      .screen ul {
        position: absolute;
        left: 0;
        top: 0px;
        width: 3000px;
        transition: 0.5s;
      }
      .all ol {
        position: absolute;
        right: 10px;
        bottom: 10px;
        line-height: 20px;
        text-align: center;
      }
      .all ol li {
        float: left;
        width: 20px;
        height: 20px;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 50%;
        margin-left: 10px;
        cursor: pointer;
      }

      #arr span {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 5px;
        top: 50%;
        margin-top: -20px;
        background: #000;
        cursor: pointer;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        font-family: "黑体";
        font-size: 30px;
        color: #fff;
        opacity: 0.3;
        border: 1px solid #fff;
      }
      #arr #right {
        right: 5px;
        left: auto;
      }

      .all ol li.active {
        background-color: rgb(255, 158, 39);
      }
    </style>
  </head>
  <body>
    <div class="all" id="all">
      <div class="screen" id="screen">
        <ul id="ul">
          <li><img src="./images/1.webp" width="500" height="200" /></li>
          <li><img src="./images/2.webp" width="500" height="200" /></li>
          <li><img src="./images/3.webp" width="500" height="200" /></li>
          <li><img src="./images/4.webp" width="500" height="200" /></li>
        </ul>
        <ol></ol>
        <div id="arr">
          <span id="left"><</span>
          <span id="right">></span>
        </div>
      </div>
    </div>

    <script>
      window.onload = function () {
        var ul = document.getElementById("ul");
        var ol = document.querySelector("ol");
        var pointIndex = 0;
        var picIndex = 0;
        var prev = document.getElementById("left");
        var next = document.getElementById("right");
        var screen = document.getElementById("screen");
        var newLi = ul.children[0].cloneNode(true);
        ul.appendChild(newLi);

        // 生成圆点
        for (let i = 0; i < ul.children.length - 1; i++) {
          var olLi = document.createElement("li");
          // 生成序号
          olLi.innerHTML = i + 1;
          ol.appendChild(olLi);
        }
        // 默认选中第一个圆点
        ol.children[0].classList.add("active");

        // 更改圆点颜色
        function changeDot() {
          // 移出所有颜色
          for (let i = 0; i < ol.children.length; i++) {
            ol.children[i].classList.remove("active");
            if (i == picIndex) {
              ol.children[i].classList.add("active");
            }
          }
        }

        // 点击圆点图滚动
        ol.addEventListener("click", function (e) {
          if (e.target.tagName.toLocaleUpperCase() === "LI") {
            var clickIndex = e.target.innerHTML - 1;
            picIndex = clickIndex;
            changeDot();
            ul.style.left = picIndex * -500 + "px";
          }
        });

        // 下一张
        // 先利用动画持续时间到克隆图,再切换到第一张
        function nextPage() {
          picIndex++;
          ul.style.left = picIndex * -500 + "px";
          ul.style.transition = ".5s";
          if (picIndex === ol.children.length) {
            picIndex = 0;
            setTimeout(() => {
              ul.style.left = 0;
              ul.style.transition = "none";
            }, 500);
          }
        }

        // 下一张

        next.addEventListener("click", function () {
          nextPage();
          changeDot();
        });

        // 上一张
        // 先切换到克隆图,再产生动画持续时间到最后一张
        prev.addEventListener("click", function () {
          picIndex--;
          // 最左边的图片
          if (picIndex === -1) {
            ul.style.left = ol.children.length * -500 + "px";
            ul.style.transition = "none";
            picIndex = ol.children.length - 1;
            // 回到最后一张图后恢复过渡效果
            setTimeout(() => {
              ul.style.left = picIndex * -500 + "px";
              ul.style.transition = ".5s";
            }, 0);
          } else {
            ul.style.left = picIndex * -500 + "px";
          }

          changeDot();
        });

        // 自动轮播
        // var timer = setInterval(function () {
        //   nextPage();
        //   changeDot();
        // }, 2000);

        // ul.addEventListener("mouseenter", function () {
        //   clearInterval(timer);
        // });
        // ul.addEventListener("mouseleave", function () {
        //   clearInterval(timer);
        //   timer = setInterval(function () {
        //     nextPage();
        //     changeDot();
        //   }, 2000);
        // });
      };
    </script>
  </body>
</html>
